import React,{Component} from 'react'
import {
    View,
    StyleSheet,
    Text,
    Image
} from 'react-native'

var Dimensions = require('Dimensions')
var {width} = Dimensions.get('window')

export default class HotTopItem extends Component{
    render(){
        return(<View style={styles.itemContainer}>
            <View style={styles.leftTextContainer}>
                <Text style={[styles.titleStyle, {color: this.props.titleColor}]}>{this.props.title}</Text>
                <Text style={styles.subTitleStyle}>{this.props.subTitle}</Text>
                <Image source={require('../../../imgs/icon_hot.png')}
                    style={{width:39, height:20,top:3}}
                />
            </View>
            <Image
                style={[styles.rightImage, {width:this.props.imgWidth? this.props.imgWidth:75, height:this.props.imgHeight? this.props.imgHeight:75}]}
                source={{uri: this.props.internetImage?this.props.internetImage:'http://localhost:8081/imgs/'+this.props.image+'.png'}}/>
        </View>)
    }
}

const styles = StyleSheet.create({
    titleStyle: {
        fontSize: 16,
    },
    subTitleStyle: {
        fontSize: 12
    },
    rightImage: {
        height: 80,
        width: 80,
        marginRight:25
    },

    leftTextContainer: {
        justifyContent: 'center',
        alignItems:'center',
        paddingLeft:25
    },

    itemContainer: {
        flexDirection:'row',
        width: (width - 12) / 2,
        height: 84,
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: '#F8F8F8'
    },
})